


; (function () {
  // ---------------------------------------- 渲染页面 ----------------------------------------
  function renderPage() {
    $.ajax({
      type: "GET",
      url: "/admin/links",
      success: function (res) {
        let str = ''
        let { status, message, data } = res
        if (status === 0) {
          res.data.forEach(item => {
            str += `
              <tr>
                <td>${item.id}</td>
                <td>
                  <div class="bg">
                    <img src="${item.linkicon}">
                  </div>
                </td>
                <td>${item.linkname}</td>
                <td>${item.linkurl}</td>
                <td>${item.linkdesc}</td>
                <td>
                  <button data-id="${item.id}" type="button" class="layui-btn layui-btn-xs edit">
                    编辑
                  </button>
                  <button data-id="${item.id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete" >
                    删除
                  </button>
                </td>
              </tr>
            `
          })
          $('tbody').html(str)
        }
      }
    });
  }
  renderPage()
  // ---------------------------------------- 添加链接 ----------------------------------------
  let addIndex
  $('.layui-card-header button').on('click', function () {
    addIndex = layer.open({
      type: 1,
      title: '添加友情链接',
      content: $('#tpl-add').html(),
      area: ['500px', '350px']
    })

    // 点击上传触发文件点击事件
    $('body').on('click', '#urlIcon', function () {
      $('#linkFile').trigger('click')
    })
    // 文件域监听
    $('body').on('change', '#linkFile', function (e) {
      let url = URL.createObjectURL(e.target.files[0])
      console.log(url)
      $('#preIcon').attr('src', url)
    })
    // 提交
    $('#form-add').submit(function (e) {
      e.preventDefault()
      let data = new FormData(this)
      $.ajax({
        type: "POST",
        url: "/admin/links ",
        data: data,
        processData: false,
        contentType: false,
        success: function (res) {
          if (res.status === 0) {
            layer.close(addIndex)
            layer.msg(res.message)
            renderPage()
          } else {
            layer.msg(res.message)
          }
        }
      });
    })
  })

  // ---------------------------------------- 删除 ----------------------------------------
  $('body').on('click', 'button:contains("删除")', function () {
    id = $(this).data('id')
    $.ajax({
      type: "delete",
      url: "/admin/links/" + id,
      success: function (res) {
        if (res.status === 0) {
          layer.msg(res.message)
          renderPage()
        }
      }
    });
  })

  // ---------------------------------------- 编辑 ----------------------------------------
  let editIndex
  $('body').on('click', 'button:contains("编辑")', function () {


    let id = $(this).data('id')
    $.ajax({
      type: "get",
      url: "/admin/links/" + id,
      success: function (res) {
        editIndex = layer.open({
          type: 1,
          title: '编辑友情链接',
          content: $('#tpl-edit').html(),
          area: ['500px', '350px']
        })

        // 数据回填
        if (res.status === 0) {
          let form = layui.form
          let { linkname, linkurl, linkdesc } = res.data
          form.val('formval', { linkname, linkurl, linkdesc })
        }
        // 点击上传触发文件点击事件
        $('body').on('click', '#urlIcon', function () {
          $('#linkFile').trigger('click')
        })
        // 文件域监听
        $('body').on('change', '#linkFile', function (e) {
          console.log(e.target.files)
          let url = URL.createObjectURL(e.target.files[0])
          console.log(url)
          $('#preIcon').attr('src', url)
        })
        // 提交
        $('#form-edit').submit(function (e) {
          e.preventDefault()
          let data = new FormData(this)
          console.log(id)
          $.ajax({
            type: "PUT",
            url: "/admin/links/ " + id,
            data: data,
            processData: false,
            contentType: false,
            success: function (res) {
              if (res.status === 0) {
                layer.close(editIndex)
                layer.msg(res.message)
                renderPage()
              } else {
                layer.msg(res.message)
              }
            }
          });
        })
      }
    });


  })
})();